<template>
  <router-view />
  <van-tabbar v-model="active" v-if="showTabbar">
    <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
    <van-tabbar-item icon="orders-o" to="/courses">课程</van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/profile">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'

const active = ref(0)
const route = useRoute()

// 根据当前路由路径设置激活的标签
const updateActive = () => {
  switch (route.path) {
    case '/':
      active.value = 0
      break
    case '/courses':
      active.value = 1
      break
    case '/profile':
      active.value = 2
      break
    default:
      active.value = 0
  }
}

// 监听路由变化
watch(() => route.path, updateActive, { immediate: true })

// 在登录、注册页面和设置了hideTabbar的页面不显示底部导航栏
const showTabbar = computed(() => {
  return !['login', 'register'].includes(route.name) && !route.meta.hideTabbar
})
</script>

<style lang="scss">
#app {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

body {
  margin: 0;
  padding: 0;
}
</style>
